<div class="row">
    <div class="top-handle-btn">
        <form id="search-form" action="javascript:;">
            每页显示：<input name="pageSize" class="form-control  input-small inline" type="number" min="2" max="50" style="width: 80px;"
                value="10" />
            <input type="text " class="form-control input-small inline" name="keyword" placeholder="输入资源关键字" />
            <button class="btn purple right search radius6"><i class="fa fa-search"></i> 查询</button>
            <!--<a class='btn green radius6' data-toggle='modal' href='#modal-add'><i class="fa fa-plus"></i> 添加</a>-->
        </form>
    </div>
</div>


<div id="modals">

    <div class="modal fade" id="modal-edit" role="basic" aria-hidden="true">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">资源权限配置：<input name="resourceName" style="border:none" disabled readonly/></h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post" id="permission-form">
                        <input type="hidden" name="id" value="" />
                        <input type="hidden" name="resourceId" value="" />
                        <input type="hidden" name="resourceUrl" value="" />
                        <table class="table table-striped table-bordered ">
                            <thead>
                                <th>角色名称</th>
                                <th>允许添加</th>
                                <th>允许修改</th>
                                <th>允许查询</th>
                                <th>允许删除</th>
                            </thead>
                            <tbody id="permission-table"></tbody>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-check"></i> 保存</button>
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i class="fa fa-close"></i> 关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-img-view" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">预览</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <img src="" alt="" width="220px;" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>

<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th>资源名称</th>
                <th>资源路径</th>
                <th>查询参数</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>
<script type="text/javascript">
    var resource = "/main/sys-resource";
    $(function () {


        DataTable.init({
            url: resource, //ajax请求url
            tableName: "data-table", //数据表table id
            paramsFormName: "search-form", //查询参数form id
            modal: "modals", //模态框div
            columns: [ //列对应的字段数组，注意顺序
                {
                    data: "resourceName",
                },
                {
                    data: "resourceUrl"
                },
                {
                    data: "queryString"
                },
                
            ],
            options: [ //操作区域(id)
                {
                    icon: "fa fa-edit",
                    option: "modal-edit",
                    edit: true,
                    editMain: true,
                    url: "/main/sys-resource/{id}/permission",
                    pre: "loadData"
                },
            ],
        });
    });

    function loadData(obj) {
        Shinez.get("/main/sys-resource/" + obj + "/permission", function (ret) {
            if (ret.status == 0) {
                var list = ret.data.arrayList;
                var emptyStr="";
                $("#modal-edit").find("[name=resourceId]").val(obj);
                $("#permission-table").html("");
                list.forEach(function (v,k) {
                    $("#permission-table").append("<tr>"+
                        "<td style='display:none'><input type='hidden' value='" + (v.id==null?emptyStr:v.id) + "'  name='permissions["+k+"].id' /></td>" +
                        "<td style='display:none'><input type='hidden' value=" + v.roleId + " name='permissions["+k+"].roleId' /></td>" +
                        "<td>" + v.roleName + "</td>" +
                        "<td>" + convertCheckBox(v.allowPost, "permissions["+k+"].allowPost") + "</td>" +
                        "<td>" + convertCheckBox(v.allowPut, "permissions["+k+"].allowPut") + "</td>" +
                        "<td>" + convertCheckBox(v.allowGet, "permissions["+k+"].allowGet") + "</td>" +
                        "<td>" + convertCheckBox(v.allowDelete, "permissions["+k+"].allowDelete") + "</td></tr>");
                }, this);

            }
        });
    }

    function convertCheckBox(boolVal, name) {
        var checkedFlag = "checked";
        if (boolVal == null || !boolVal) {
            checkedFlag = "";
        }
        return "<label class='mt-checkbox'><input type='checkbox'  name=" + name + " " + checkedFlag +
            " value='1' name='service'><span><span></label>"
    }
</script>